import React from 'react';
import "./index.scss"
import {Form,Input,Button,notification} from 'antd'

import service from '../../api'
import {useDispatch} from 'react-redux'
import { useNavigate } from 'react-router-dom';

const Login = () => {

    var dispatch = useDispatch();
    var history = useNavigate();

    var onFinish = async (values:any)=>{
        //发起登陆请求
        var res = await service.admin.admin_login(values);
        if( res.data.code == 200 ){
            //弹框"登陆成功"
            notification.success({message:'登陆成功',duration:2});
            //保存token
            dispatch({type:'SAVE_LOGINDATA',payload:res.data.data});
            //跳路由到主页
            history('/index');
        }else{
            //弹框"登陆失败"
            notification.error({message:'登陆失败',duration:2});

        }
    }
    return (
        <div className='login'>
            <div className="login-box">
                <div className="title">嗨购后台管理系统</div>
                <Form
                    className='form'
                    onFinish={onFinish}
                >
                    <Form.Item
                    name="adminname"
                    rules={[{ required: true, message: '请输入登陆账号!' }]}
                    >
                        <Input placeholder='默认账号:admin' />
                    </Form.Item>

                    <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入登陆密码!' }]}
                    >
                        <Input.Password placeholder='默认密码:123456'/>
                    </Form.Item>

                    <Form.Item>
                        <Button block type="primary" htmlType="submit">立即登陆</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default Login;